<template>
  <div>
    <el-button v-on:click="run" :type="type" :size="size" :disabled="disabled || time > 0">{{ text }}</el-button>
  </div>
</template>
<style>
</style>
<script>
  export default{
    props: {
      second: {
        type: Number,
        default: 60
      },
      disabled: {
        type: Boolean,
        default: false
      }, size: {
        type: String,
        default: null
      }, btntext: {
        type: String,
        default: '获取验证码'
      }, clktext: {
        type: String,
        default: '秒后重获取'
      }, type: {
        type: String,
        default: 'info'
      }
    },
    data: function () {
      return {
        time: 0,
        loading:false
      }
    }
    ,
    methods: {
      run: function () {
        this.$emit('run');
      }
      ,
      start: function () {
        this.time = this.second;
        this.timer();
      }
      ,
      stop: function () {
        this.time = 0;
        this.disabled = false;
      }
      ,
      setDisabled: function (val) {
        this.disabled = val;
      }
      ,
      timer: function () {
        if (this.time > 0) {
          this.time--;
          setTimeout(this.timer, 1000);
        } else {
          this.disabled = false;
        }
      }

    }
    ,
    computed: {
      text: function () {
        return this.time > 0 ? this.time + this.clktext : this.btntext;
      }
    }
  }
</script>
